<!-- src/views/Login.vue -->
<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
    <p>还没有账号？<router-link to="/register">注册</router-link></p>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  setup() {
    const router = useRouter(); // 获取 Vue Router 实例
    return { router };
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === 'admin') {
        console.log('登录成功，用户名为:', this.username);  // 打印登录成功的用户名
        this.$emit('login-success', this.username); // 通知父组件（根组件）更新 username
        this.$router.push('/');  // 登录后跳转到主页
        // 在这里，你可以通过 $emit 或其他方式将用户名传递给父组件
        // this.$root.username = this.username;  // 将用户名传递给根组件 (App.vue)
      } else {
        alert('用户名或密码错误，请重试');
      }
    }
  }
}
</script>


<style scoped>
.login-container {
  max-width: 400px;
  margin: 36vh auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
